<template>
	<view>
		<uni-search-bar v-if="!isShowWebview" class="search-bar" placeholder="搜索" bgColor="#fff" @confirm="search" />
		<web-view v-if="isShowWebview" :src="`https://m.douban.com/search?query=${query}`"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否显示webview
				isShowWebview: false,
				// 查询的关键字
				query: ''
			}
		},
		methods: {
			search(ev) {
				// 判断，当用户在输入框里什么都没有输入时，就什么也不做
				if(ev.value.trim() === '') {
					return
				}
				
				
				// 设置查询关键字
				this.query = ev.value
				// 显示 web-view
				this.isShowWebview = true
			}
		}
	}
</script>

<style scoped>
	.search-bar {
		background-color: #42bd55;
	}
</style>
